<template>
  <div class="question-generator">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-icon">
        <span class="icon">🧠</span>
      </div>
      <h1>智能出题</h1>
      <p class="subtitle">AI驱动生成各类题目，提升教学效率</p>
    </div>
    
    <div class="generator-container">
      <div class="tabs">
        <button 
          :class="{ active: activeTab === 'keywords' }" 
          @click="activeTab = 'keywords'"
        >
          <span class="tab-icon">👑</span>
          核心词生成
        </button>
        <button 
          :class="{ active: activeTab === 'file' }" 
          @click="activeTab = 'file'"
        >
          <span class="tab-icon">📄</span>
          文件生成
        </button>
      </div>
      
      <div class="tab-content">
        <div v-if="activeTab === 'keywords'" class="keywords-form">
          <div class="form-header">
            <span class="form-icon">🧠</span>
            <h3>核心词出题</h3>
            <p>基于关键词问答生成各种类题目</p>
          </div>
          
          <div class="form-group">
            <label for="core-words">🔤 核心词</label>
            <input 
              type="text" 
              id="core-words" 
              v-model="coreWords" 
              placeholder="输入主题或关键词，如'数学'、'物理'、'语文'..."
            >
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label for="question-type">🎯 题目类型</label>
              <select id="question-type" v-model="questionType">
                <option value="">随机类型</option>
                <option value="选择题">选择题</option>
                <option value="填空题">填空题</option>
                <option value="简答题">简答题</option>
                <option value="论述题">论述题</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="question-count">📊 题目数量</label>
              <input 
                type="number" 
                id="question-count" 
                v-model.number="questionCount" 
                min="1" 
                max="20"
              >
            </div>
            
            <div class="form-group">
              <label for="difficulty">⚡ 难度</label>
              <select id="difficulty" v-model="difficulty">
                <option value="简单">简单</option>
                <option value="中等">中等</option>
                <option value="困难">困难</option>
              </select>
            </div>
          </div>
          
          <button class="generate-btn" @click="generateFromKeywords">
            <span class="btn-icon">⚡</span>
            {{ generating ? '生成中...' : '生成题目' }}
          </button>
        </div>
        
      <div v-if="activeTab === 'file'" class="file-form">
        <div class="form-header">
          <span class="form-icon">📄</span>
          <h3>文件出题</h3>
          <p>基于文档内容智能生成题目</p>
        </div>
        
        <div class="upload-section">
          <label class="upload-label">📁 上传文档</label>
          <div 
            class="upload-area"
            :class="{ dragover: isDragOver }"
            @dragover.prevent
            @dragenter.prevent="handleDragEnter"
            @dragleave.prevent="handleDragLeave"
            @drop.prevent="handleFileDrop"
            @click="triggerFileInput"
          >
            <div class="upload-icon">
              <div class="folder-icon">📁</div>
            </div>
            <div class="upload-text">
              <p class="primary-text">点击选择文件或拖拽到此处</p>
              <p class="secondary-text">支持 TXT、PDF、PPT、PPTX 格式</p>
            </div>
            <input 
              ref="fileInput"
              type="file" 
              id="file-upload" 
              accept=".txt,.pdf,.pptx,.ppt"
              @change="handleFileUpload"
              style="display: none;"
            >
          </div>
          <div v-if="uploadedFile" class="file-info">
            {{ uploadedFile.name }} ({{ formatFileSize(uploadedFile.size) }})
          </div>
        </div>
        
        <!-- 文档预览区域 -->
        <div v-if="filePreview" class="form-group preview-container">
          <label>文档预览：</label>
          <div class="preview-content">
          <div v-if="uploadedFile && uploadedFile.name.endsWith('.pdf')" class="preview-text">
            <h3>PDF内容预览：</h3>
            <p>{{ filePreview }}</p>
          </div>
          <div v-else-if="uploadedFile && (uploadedFile.name.endsWith('.pptx') || uploadedFile.name.endsWith('.ppt'))" class="preview-text">
            <h3>PPT内容预览：</h3>
            <p>{{ filePreview }}</p>
          </div>
            <div v-else class="preview-text">
              <h3>文本内容：</h3>
              <pre>{{ filePreview }}</pre>
            </div>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label for="file-question-type">🎯 题目类型</label>
            <select id="file-question-type" v-model="fileQuestionType">
              <option value="">随机类型</option>
              <option value="选择题">选择题</option>
              <option value="填空题">填空题</option>
              <option value="简答题">简答题</option>
              <option value="论述题">论述题</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="file-question-count">📊 题目数量</label>
            <input 
              type="number" 
              id="file-question-count" 
              v-model.number="fileQuestionCount" 
              min="1" 
              max="20"
            >
          </div>
          
          <div class="form-group">
            <label for="file-difficulty">⚡ 难度</label>
            <select id="file-difficulty" v-model="fileDifficulty">
              <option value="简单">简单</option>
              <option value="中等">中等</option>
              <option value="困难">困难</option>
            </select>
          </div>
        </div>
        
        <button class="generate-btn" @click="generateFromFile">
          <span class="btn-icon">⚡</span>
          {{ generating ? '生成中...' : '生成题目' }}
        </button>
      </div>
      </div>
      
      <div v-if="questions" class="results">
        <div class="results-header">
          <h2>生成的题目：</h2>
          <div class="export-controls">
            <select v-model="exportFormat" class="format-select">
              <option value="txt">TXT</option>
              <option value="markdown">Markdown</option>
              <option value="pdf">PDF</option>
              <option value="docx">DOCX</option>
              <option value="html">HTML</option>
            </select>
            <button class="download-btn" @click="exportQuestions" :disabled="exporting">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
              </svg>
              {{ exporting ? '导出中...' : '导出题目' }}
            </button>
          </div>
        </div>
        <textarea v-model="editableQuestions" class="questions-edit"></textarea>
      </div>
      
      <div v-if="error" class="error-message">
        {{ error }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, watch } from 'vue';
import axios from 'axios';
import { generateQuestions } from '@/services/question';
import type { GenerateQuestionsRequest } from '@/services/question';

export default defineComponent({
  setup() {
    // 核心词生成相关状态
    const activeTab = ref('keywords');
    const coreWords = ref('');
    const questionType = ref('');
    const questionCount = ref(5);
    const difficulty = ref('中等');
    
    // 文件生成相关状态
    const uploadedFile = ref<File | null>(null);
    const filePreview = ref(''); // 存储文档预览内容
    const fileQuestionType = ref('');
    const fileQuestionCount = ref(5);
    const fileDifficulty = ref('中等');
    
    // 通用状态
    const generating = ref(false);
    const questions = ref('');
    const error = ref('');
    const isDragOver = ref(false);
    
    // 导出相关状态
    const exportFormat = ref('txt');
    const exporting = ref(false);
    
    // 源类型跟踪
    const lastGenerationType = ref('');
    const lastSourceName = ref('');
    
    // 处理文件上传
    const handleFileUpload = async (event: Event) => {
      const input = event.target as HTMLInputElement;
      if (input.files && input.files[0]) {
        const file = input.files[0];
        await processUploadedFile(file);
      }
    };
    
    // 处理拖拽文件上传
    const handleFileDrop = async (event: DragEvent) => {
      isDragOver.value = false;
      if (event.dataTransfer && event.dataTransfer.files.length > 0) {
        const file = event.dataTransfer.files[0];
        await processUploadedFile(file);
      }
    };
    
    // 处理拖拽进入
    const handleDragEnter = () => {
      isDragOver.value = true;
    };
    
    // 处理拖拽离开
    const handleDragLeave = () => {
      isDragOver.value = false;
    };
    
    // 触发文件输入
    const fileInput = ref<HTMLInputElement | null>(null);
    const triggerFileInput = () => {
      if (fileInput.value) {
        fileInput.value.click();
      }
    };
    
    // 处理上传的文件（公共方法）
    const processUploadedFile = async (file: File) => {
      uploadedFile.value = file;
      error.value = '';
      filePreview.value = '';
      
      // 读取文件内容进行预览
      try {
        if (file.type === 'text/plain' || file.name.endsWith('.txt')) {
          const text = await readTextFile(file);
          filePreview.value = text;
        } else if (file.type === 'application/pdf' || file.name.endsWith('.pdf')) {
          const text = await readPDFFile(file);
          filePreview.value = text;
        } else if (file.name.endsWith('.pptx') || file.name.endsWith('.ppt')) {
          const text = await readPPTFile(file);
          filePreview.value = text;
        } else {
          error.value = '不支持的文档格式';
        }
      } catch (err) {
        error.value = '文档读取失败: ' + (err as Error).message;
      }
    };
    
    // 读取文本文件
    const readTextFile = (file: File): Promise<string> => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target?.result as string || '');
        reader.onerror = reject;
        reader.readAsText(file);
      });
    };
    
    // 读取PDF文件（简化版，实际需要后端支持）
    const readPDFFile = (file: File): Promise<string> => {
      return new Promise((resolve) => {
        // 实际应用中应调用后端API解析PDF
        // 这里返回示例文本
        resolve(`PDF文档预览功能需要后端支持\n文件名: ${file.name}\n大小: ${formatFileSize(file.size)}`);
      });
    };
    
    // 读取PPT文件（简化版，实际需要后端支持）
    const readPPTFile = (file: File): Promise<string> => {
      return new Promise((resolve) => {
        // 实际应用中应调用后端API解析PPT
        // 这里返回示例文本
        resolve(`PPT文档预览功能需要后端支持\n文件名: ${file.name}\n大小: ${formatFileSize(file.size)}`);
      });
    };
    
    // 格式化文件大小
    const formatFileSize = (bytes: number) => {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    };
    
    // 从核心词生成题目
    const generateFromKeywords = async () => {
      if (!coreWords.value.trim()) {
        error.value = '请输入核心词';
        return;
      }
      
      // 记录生成类型和源名称
      lastGenerationType.value = 'keywords';
      lastSourceName.value = coreWords.value;
      
      await generateQuestionsHandler({
        core_words: coreWords.value,
        question_type: questionType.value,
        count: questionCount.value,
        difficulty: difficulty.value
      });
    };
    
    // 从文件生成题目
    const generateFromFile = async () => {
      if (!uploadedFile.value) {
        error.value = '请上传文件';
        return;
      }
      
      // 记录生成类型和源名称
      lastGenerationType.value = 'file';
      lastSourceName.value = uploadedFile.value.name;
      
      // 检查文件类型
      const validTypes = ['text/plain', 'application/pdf'];
      const validExtensions = ['.txt', '.pdf', '.ppt', '.pptx'];
      
      if (!validTypes.includes(uploadedFile.value.type) && 
          !validExtensions.some(ext => uploadedFile.value!.name.endsWith(ext))) {
        error.value = '请上传TXT/PDF/PPT文件';
        return;
      }
      
      // 检查文件大小 (最大10MB)
      if (uploadedFile.value.size > 10 * 1024 * 1024) {
        error.value = '文件大小不能超过10MB';
        return;
      }
      
      // 创建FormData对象
      const formData = new FormData();
      formData.append('file', uploadedFile.value);
      
      // 添加其他参数
      formData.append('question_type', fileQuestionType.value);
      formData.append('count', fileQuestionCount.value.toString());
      formData.append('difficulty', fileDifficulty.value);
      
      await generateQuestionsHandler(formData, true);
    };
    
    // 通用的题目生成处理函数
    const generateQuestionsHandler = async (data: GenerateQuestionsRequest | FormData, isFile = false) => {
      generating.value = true;
      questions.value = '';
      error.value = '';
      
      try {
        let response: string;
        
        if (isFile) {
          // 先上传文件
          const fileResponse = await axios.post('/api/upload', data, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          
          if (!fileResponse.data || !fileResponse.data.file_path) {
            throw new Error('文件上传失败');
          }
          
          // 然后调用题目生成接口
          response = await generateQuestions({
            file_path: fileResponse.data.file_path,
            question_type: isFile ? fileQuestionType.value : questionType.value,
            count: isFile ? fileQuestionCount.value : questionCount.value,
            difficulty: isFile ? fileDifficulty.value : difficulty.value
          });
        } else {
          response = await generateQuestions(data as GenerateQuestionsRequest);
        }
        
        questions.value = response;
      } catch (err) {
        error.value = '题目生成失败：' + (err as Error).message;
      } finally {
        generating.value = false;
      }
    };
    
    // 格式化题目文本（保留换行）
    // 可编辑的题目内容
    const editableQuestions = ref('');
    
    // 当生成新题目时更新可编辑内容
    watch(questions, (newVal) => {
      editableQuestions.value = newVal;
    }, { immediate: true });
    
    // 导出题目
    const exportQuestions = async () => {
      if (!editableQuestions.value) {
        error.value = '没有可导出的题目内容';
        return;
      }
      
      exporting.value = true;
      error.value = '';
      
      try {
        // 调用后端导出API
        const response = await axios.post('/api/export-questions', {
          content: editableQuestions.value,
          format: exportFormat.value,
          source_type: lastGenerationType.value,
          source_name: lastSourceName.value
        });
        
        if (response.data.success) {
          // 下载导出的文件
          const downloadUrl = `http://localhost:8000${response.data.download_url}`;
          const a = document.createElement('a');
          a.href = downloadUrl;
          a.download = response.data.filename; // 设置下载文件名
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        } else {
          error.value = response.data.message || '导出失败';
        }
      } catch (err) {
        console.error('导出错误:', err);
        error.value = '导出失败：' + (err as Error).message;
      } finally {
        exporting.value = false;
      }
    };
    
    return {
      activeTab,
      coreWords,
      questionType,
      questionCount,
      difficulty,
      uploadedFile,
      filePreview,
      fileQuestionType,
      fileQuestionCount,
      fileDifficulty,
      generating,
      questions,
      error,
      isDragOver,
      handleFileUpload,
      handleFileDrop,
      handleDragEnter,
      handleDragLeave,
      triggerFileInput,
      fileInput,
      formatFileSize,
      generateFromKeywords,
      generateFromFile,
      editableQuestions,
      exportFormat,
      exporting,
      exportQuestions,
      lastGenerationType,
      lastSourceName
    };
  }
});
</script>

<style scoped>
.question-generator {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.header-icon .icon {
  font-size: 36px;
}

.page-header h1 {
  font-size: 36px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 12px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 16px;
  color: #718096;
  margin: 0;
  font-weight: 400;
}

.generator-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}



.tabs {
  display: flex;
  margin-bottom: 32px;
  background: #f7fafc;
  border-radius: 12px;
  padding: 6px;
  gap: 4px;
}

.tabs button {
  flex: 1;
  padding: 16px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #718096;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-icon {
  font-size: 18px;
}

.tabs button:hover {
  color: #4a5568;
  background: rgba(102, 126, 234, 0.05);
}

.tabs button.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.form-header {
  margin-bottom: 32px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border-left: 4px solid #667eea;
}

.form-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

.form-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.form-header p {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #4a5568;
  font-size: 14px;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 16px;
  background: #ffffff;
  color: #2d3748;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

input[type="text"]::placeholder {
  color: #a0aec0;
  font-size: 14px;
}

select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
}

select option {
  background: #ffffff;
  color: #2d3748;
  padding: 10px;
}

input[type="file"] {
  width: 100%;
  padding: 14px 16px;
  color: #4a5568;
  background: #ffffff;
  border: 2px dashed #cbd5e0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type="file"]:hover {
  border-color: #667eea;
  background: #f8fafc;
}

.generate-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  margin-top: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-icon {
  font-size: 18px;
}

.generate-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a67d8, #6b46c1);
}

.generate-btn:active {
  transform: translateY(-1px);
}

.generate-btn:disabled {
  background: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.file-info {
  margin-top: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 14px;
  color: #4a5568;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-info::before {
  content: "📄";
  font-size: 16px;
}

.upload-section {
  margin-bottom: 24px;
}

.upload-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
  color: #4a5568;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.upload-area {
  border: 2px dashed #cbd5e0;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc;
  position: relative;
}

.upload-area:hover {
  border-color: #667eea;
  background: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.upload-area.dragover {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  transform: scale(1.02);
}

.upload-icon {
  margin-bottom: 16px;
}

.folder-icon {
  font-size: 48px;
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
}

.upload-text {
  color: #4a5568;
}

.primary-text {
  font-size: 16px;
  font-weight: 500;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.secondary-text {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.results {
  margin-top: 40px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.results h2 {
  color: #2d3748;
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.results h2::before {
  content: "📝";
  font-size: 22px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.export-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.format-select {
  width: 130px;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  color: #2d3748;
  cursor: pointer;
  transition: all 0.3s ease;
}

.format-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.format-select option {
  background: #ffffff;
  color: #2d3748;
  padding: 10px;
}

.download-btn {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
  background: linear-gradient(135deg, #38a169, #2f855a);
}

.download-btn:disabled {
  background: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.questions-edit {
  width: 100%;
  min-height: 350px;
  padding: 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 14px;
  line-height: 1.7;
  background: #ffffff;
  color: #2d3748;
  resize: vertical;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.questions-edit:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: #fafafa;
}

.error-message {
  margin-top: 24px;
  padding: 16px 20px;
  background: #fed7d7;
  border: 2px solid #feb2b2;
  border-radius: 12px;
  color: #c53030;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.error-message::before {
  content: "⚠️";
  font-size: 18px;
  flex-shrink: 0;
}

.preview-container {
  margin-top: 20px;
}

.preview-content {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  max-height: 250px;
  overflow-y: auto;
  border-left: 4px solid #667eea;
}

.preview-text {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
}

.preview-text h3 {
  color: #2d3748;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-text h3::before {
  content: "👀";
  font-size: 18px;
}

.preview-text pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  margin: 0;
  color: #2d3748;
  background: #ffffff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.preview-text p {
  margin: 0;
  color: #4a5568;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .question-generator {
    padding: 20px 16px;
    background: #f8fafc;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .header-icon {
    width: 60px;
    height: 60px;
  }
  
  .header-icon .icon {
    font-size: 28px;
  }
  
  .generator-container {
    padding: 24px 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .tabs {
    flex-direction: column;
    gap: 0;
  }
  
  .tabs button {
    padding: 12px 20px;
  }
}
</style>
